<template>
  <div class="search-box">
    <div class="search-input-box">
      <div class="input-box">
        <a-input-search v-model="keyword" placeholder="" enter-button="Search" size="large" @search="onSearch" />
      </div>
    </div>
    <div class="check-box">
      <div class="search-condition-box">
        <div class="select-item">
          <span :class="sort===''?'sort-active':''" @click="doSearchBySort('')">综合排序</span>
          <span :class="sort==='2'||sort==='1'?'sort-active':''" @click="doSearchBySort('2')">时间排序
          </span>
          <span :class="sort==='3'||sort==='4'?'sort-active':''" @click="doSearchBySort('4')">浏览量
          </span>
        </div>
        <!-- <div class="select-item">
                        <span :class="categoryId===''?'category-active':''" @click="doSearchByCategory('')">全部分类</span><span @click="doSearchByCategory(item.id)" :class="categoryId===item.id?'category-active':''" v-for="item in categories" :key="item.id">{{item.name}}</span>
                    </div> -->
      </div>
    </div>
    <div class="main-wapper">
      <div class="article-left-box">
        <div class="result-count">
          共找到&nbsp;
          <font size="4" face="arial">
            {{ searchResultTotal }}
          </font>&nbsp;条结果
        </div>
        <section>
          <div v-if="searchResult.length>0" class="blog-list">
            <div v-for="(item) in searchResult" :key="item.id" class="blog-item-box">
              <h4>
                <nuxt-link :to="`/article/${item.id}`" class="original">
                  <span class="original">原创</span>
                  <label v-html="item.blogTitle" />
                </nuxt-link>
              </h4>
              <p class="content">
                <nuxt-link :to="`/article/${item.id}`">
                  {{ item.blogSummary }}
                </nuxt-link>
              </p>
              <div class="info">
                <p>
                  <span class="date"> <i>
                    <a-icon type="clock-circle" />
                  </i>{{ dateformat(item.blogCreateTime) }}</span>
                  <span class="read-num"><i>
                    <a-icon type="eye" />
                  </i>{{ item.blogViewCount }}</span>
                  <span class="read-num">
                    <template v-for="(tag) in item.blogLabels.split(',')">
                      <a-tooltip :key="tag" :title="tag">
                        <a-tag :key="tag" color="#9da0c9">
                          {{ tag }}
                        </a-tag>
                      </a-tooltip>
                    </template>
                  </span>
                </p>
              </div>
            </div>
            <div class="page-help-box">
              <div class="left-page-help-box">
                <span v-if="!isFirstPage">
                  <font size="5">&laquo;</font>上一页
                </span>
              </div>
              <div v-if="!isLastPage" class="right-page-help-box">
                <span>下一页<font size="5">&raquo;</font></span>
              </div>
            </div>
          </div>
          <div v-else class="blog-list blog-list-null">
            <a-empty />
          </div>
        </section>
      </div>
      <div class="article-right-box">
        <section>
          <div class="timeline-category-list-box">
            <h4>
              <i>
                <a-icon type="profile" />
              </i>
              <span>文章分类</span>
            </h4>
            <div class="timeline-list-box">
              <span v-for="item in categoryArticleCount" :key="item.cid">
                <p class="original" @click="doSearchBySort('',item.cid)">
                  {{ item.name }}({{ item.counter }})
                </p>
              </span>
            </div>
          </div>
        </section>
        <div class="right-advertisement-box">
          <agile :autoplay-speed="5000" :autoplay="true" :dots="false" :nav-buttons="false">
            <div>
              <img src="https://img0.baidu.com/it/u=1120805312,31195765&fm=26&fmt=auto">
            </div>
            <div>
              <img src="https://img1.baidu.com/it/u=554809536,2732110137&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=560">
            </div>
          </agile>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSearchArticleList, getCategoryArticleCount } from '@/api/api'
export default {
  async asyncData ({ params }) {
    const categoryId = ''
    const keyword = params.keyword
    const pageNo = 1
    const pageSize = 10
    const sort = ''
    const result = await getSearchArticleList(categoryId, keyword, pageNo, pageSize, sort)
    const categoryArticleCount = await getCategoryArticleCount(1, 10)
    const searchResult = result.data
    return {
      searchResult: searchResult.list,
      searchResultTotal: searchResult.total,
      isFirstPage: searchResult.isFirstPage,
      isLastPage: searchResult.isLastPage,
      sort,
      keyword,
      pageNo,
      pageSize,
      categoryId: '',
      categoryArticleCount: categoryArticleCount.data.list
    }
  },
  data () {
    return {
      pagination: {
        totle: 0,
        hasNextPage: false,
        isFirstPage: false,
        isLastPage: false,
        pageNum: 0
      }
    }
  },
  head () {
    return {
      title: 'King`s阅览室--搜索页面',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'King`s 阅览室，这是个人技术博客。主要包括系统定制(AOSP),JavaWeb开发，Vue技术，前端，Java开发'
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: 'King,博客,java,vue,nuxt,开发，博客系统，程序员，程序猿'
        }
      ]
    }
  },
  methods: {
    doSearchBySort (sort, categoryId) {
      if (sort === '2' && this.sort === '2') {
        sort = '1'
      }
      // 如果是‘4’ 按浏览量降序
      if (sort === '4' && this.sort === '4') {
        sort = '3'
      }
      if (categoryId) {
        this.categoryId = categoryId
      }
      getSearchArticleList(this.categoryId, this.keyword, this.pageNo, this.pageSize, sort).then((result) => {
        if (result.code === 200) {
          this.searchResult = result.data.list
          this.searchResultTotal = result.data.total
          this.isLastPage = result.data.isLastPage
          this.isFirstPage = result.data.isFirstPage
          console.log('search_result', result)
        }
      })
    },
    dateformat (value) {
      const dayjs = require('dayjs')
      return dayjs(value).format('YYYY-MM-DD HH:mm')
    },
    // 搜索
    onSearch (value) {
      if (value === '') {
        return
      }
      this.$router.push('/search/' + value)
    }
  }
}
</script>

<style lang="less" scoped>
.search-box {
    margin: 10px auto;
    max-width: 1249px;
    // 输入框
    .search-input-box {
        max-width: 1249;
        border-radius: 5px;
        background: #fff;
        .input-box {
            margin: 0px 200px;
            padding: 10px;
            line-height: 40px;
        }
    }
    // 排序分类操作框
    .check-box {
        margin-top: 10px;
        border-radius: 5px;
        background: #fff;
        .search-condition-box {
            border-top: solid 1px #dcdfe6;
            padding: 20px 20px 30px;
            .select-item span:hover {
                color: dodgerblue;
            }
            .select-item {
                line-height: 24px;
                margin-top: 10px;
            }
            .select-item span {
                margin-left: 8px;
                margin-right: 8px;
                padding: 5px 15px;
                font-size: 13px;
                cursor: pointer;
                color: #7f828b;
            }
            .sort-active {
                background: dodgerblue;
                color: #fff !important;
                border-radius: 4px;
            }
        }
    }
    .main-wapper {
        // 搜索结果
        .article-left-box {
            width: 939px;
            float: left;
            .result-count {
                margin: 10px 0px;
                background: #fff;
            }
            .blog-list {
                // 搜索列表
                .blog-item-box {
                    background: #fff;
                    padding: 16px 24px 12px 24px;
                    border-bottom: 1px solid #eaedf1;
                    &:hover {
                        background: #f9fafc;
                        h4 {
                            a {
                                &.original {
                                    color: blue;
                                }
                                &.reprint {
                                    color: rgba(0, 180, 0, 0.88);
                                }
                            }
                        }
                    }
                    * {
                        word-wrap: break-word;
                    }
                    h4 {
                        font-weight: normal;
                        a {
                            display: block;
                            word-break: break-all;
                            color: #222226;
                            font-size: 18px;
                            line-height: 20px;
                            font-weight: 500;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                            max-width: 400px;
                            span {
                                vertical-align: 2px;
                                display: inline-block;
                                box-sizing: border-box;
                                width: 34px;
                                height: 20px;
                                line-height: 20px;
                                text-align: center;
                                font-size: 12px;
                                border-radius: 2px;
                                &.original {
                                    color: blueviolet;
                                    background-color: rgba(47, 84, 235, 0.2);
                                }
                                &.reprint {
                                    color: rgba(0, 180, 0, 0.88);
                                    background-color: rgba(0, 180, 0, 0.1);
                                }
                            }
                            label {
                                cursor: pointer;
                            }
                        }
                    }
                    .content {
                        margin-top: 6px;
                        a {
                            display: block;
                            font-size: 14px;
                            line-height: 22px;
                            color: #999aaa;
                            // @include multi-line-ellipsis(2);
                        }
                    }
                    .info {
                        p {
                            line-height: 24px;
                            color: #5f6471;
                            .date {
                                color: #5f6471;
                                margin-left: 3px;
                                i {
                                    color: #c8c8c8;
                                    margin-right: 2px;
                                }
                            }
                            .read-num {
                                color: #5f6471;
                                margin-left: 10px;
                                i {
                                    color: #c8c8c8;
                                    margin-right: 6px;
                                }
                            }
                        }
                    }
                }
                //分页
                .page-help-box {
                    height: 50px;
                    background: #fff;
                    color: #bdbdbd;
                    .left-page-help-box {
                        float: left;
                        span {
                            font-size: 5;
                            text-align: center;
                            line-height: 50px;
                            padding: 0px 10px 0px;
                            &:hover {
                                color: dodgerblue;
                            }
                        }
                    }
                    .right-page-help-box {
                        float: right;
                        span {
                            font-size: 5;
                            text-align: center;
                            line-height: 50px;
                            padding: 0px 10px 0px;
                            &:hover {
                                color: dodgerblue;
                            }
                        }
                    }
                }
            }
            .blog-list-null {
                background: #fff;
                text-align: center;
                padding: 180px 0;
                i {
                    font-size: 200px;
                    color: yellowgreen;
                }
                p {
                    margin-top: 12px;
                    font-weight: bold;
                    color: #595959;
                    font-size: 15px;
                    letter-spacing: 2px;
                }
            }
        }
        // 分类
        .article-right-box {
            margin-top: 10px;
            width: 300px;
            border-radius: 5px;
            margin-left: 10px;
            float: left;
            // 分类
            .timeline-category-list-box {
                // margin-top: 10px;
                background: #fff;
                border-radius: 5px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
                h4 {
                    font-weight: normal;
                    padding: 11px 16px 8px;
                    margin-bottom: 3px;
                    border-bottom: 1px solid #f3f3f3;

                    i {
                        vertical-align: middle;
                        margin-right: 2px;
                        color: #0288d1;
                        font-size: 16px;
                        line-height: 20px;
                    }

                    span {
                        font-weight: bold;
                        font-size: 14px;
                        line-height: 20px;
                        color: #333;
                    }
                }
                .timeline-list-box {
                    padding: 10px 20px 10px;
                    span {
                        p {
                            cursor: pointer;
                        }
                        p:hover {
                            &.original {
                                color: #409eff;
                            }

                            &.reprint {
                                color: #67c23a;
                            }
                        }
                    }
                }
            }
            //轮播图
            .right-advertisement-box {
                margin-top: 10px;
                border-radius: 5px;
                height: 160px;
                img {
                    height: 150px;
                    width: 300px;
                    border-radius: 5px;
                }
            }
        }
    }
}
</style>
